<script setup lang="ts">
import roomMessage from '@/hooks/roomMessageHooks'
import { MessageItemModel } from '@/models/roomMessageModels'
import { StatisticsTab } from '@/models/sys'
import NotData from '@/components/NotData.vue'
import { avatarUrl } from '@/utils'

const { ...callback } = roomMessage()
const listData = ref<MessageItemModel[]>([])
const paging = ref()
const props = defineProps<{
  id: number
  tabPosition: number
  isShowMenuDialog: boolean
}>()

async function query(page: number, per_page: number) {
  if (props.id !== undefined) {
    const listData = await callback.messagesList(props.id, page, per_page)
    paging.value.complete(listData)
  }
}

watch(
  () => props.tabPosition,
  () => {
    refresh()
  },
)

watch(
  () => props.isShowMenuDialog,
  () => {
    if (props.isShowMenuDialog) {
      refresh()
    }
  },
)

function refresh() {
  if (StatisticsTab.ChatHistory === props.tabPosition) {
    paging.value.refresh()
  }
}
</script>

<template>
  <view style="padding: 24rpx">
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="没有更多了"
        v-model="listData"
        @query="query"
        :fixed="false"
        :default-page-size="10"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view v-for="(item, index) in listData" :key="index">
          <view class="linear-hor mt-3" v-if="item.is_myself == 1">
            <span class="spacer" />
            <view class="linear-vertical" style="align-items: end">
              <view class="linear-hor">
                <view class="round-corners-chat-right">
                  <wd-text :text="item.content" color="#2B2F36" size="16"></wd-text>
                </view>
                <view class="triangle-right" />
              </view>
            </view>
            <view style="width: 72px; height: 72px; margin-left: 10rpx">
              <wd-img
                :enable-preview="true"
                :src="avatarUrl(item.avatar)"
                :width="36"
                :height="36"
                :radius="4"
              ></wd-img>
            </view>
          </view>

          <view class="linear-hor mt-3" v-if="item.is_myself != 1">
            <view style="margin-right: 10rpx">
              <wd-img
                :enable-preview="true"
                :src="avatarUrl(item.avatar)"
                :width="36"
                :height="36"
                :radius="4"
              ></wd-img>
            </view>

            <view class="linear-vertical" style="align-items: start">
              <view style="margin-left: 10rpx">
                <wd-text :text="item.nickname" color="#6A707C" size="11" :lines="1"></wd-text>
              </view>
              <view class="linear-hor">
                <view class="triangle-left" />
                <view class="round-corners-chat-left">
                  <wd-text :text="item.content" color="#2B2F36" size="16"></wd-text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-corners-chat-left {
  padding: 16rpx 30rpx;
  margin-right: 82rpx;
  background: white;
  border-radius: 8rpx;
}

.round-corners-chat-right {
  padding: 16rpx 30rpx;
  margin-left: 82rpx;
  background: #a4ebd2;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
}

.spacer {
  flex-grow: 1;
}

.triangle-left {
  width: 0;
  height: 0;
  margin-top: 10px;
  border-top: 5px solid transparent;
  border-right: 5px solid white;
  border-bottom: 5px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  margin-top: 15.5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #a4ebd2;
}

.scroll-views {
  height: calc(1080rpx - 228rpx);
}
</style>
